<!DOCTYPE html>  <!-- 声明文档类型为HTML5标准 -->
<html lang="zh-CN">  <!-- 设置文档语言为简体中文 -->
<head>
    <meta charset="UTF-8">  <!-- 定义字符编码为UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  <!-- 移动端视口适配设置 -->
    <title>龙华系统研发中心 - LoongChineOperatingSystem</title>  <!-- 页面标题 -->
    <!-- 引入Font Awesome图标库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <style>
        /* 定义CSS全局变量 */
        :root {
            --primary-color: #2c3e50;  /* 主色调（深蓝） */
            --secondary-color: #3499db;  /* 辅助色（亮蓝） */
            --accent-color: #e74c3c;  /* 强调色（红色） */
            --text-color: #333;  /* 主要文本颜色 */
            --bg-color: #f8f9fa;  /* 背景色（浅灰） */
        }

        /* 全局样式重置 */
        * {
            box-sizing: border-box;  /* 盒模型计算方式 */
            margin: 0;  /* 清除默认外边距 */
            padding: 0;  /* 清除默认内边距 */
        }

        /* 页面主体样式 */
        body {
            font-family: 'Segoe UI', system-ui, sans-serif;  /* 字体栈设置 */
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);  /* 背景渐变效果 */
            color: var(--text-color);  /* 继承全局文本颜色 */
            line-height: 1.6;  /* 行高设置 */
            min-height: 100vh;  /* 最小高度为视口高度 */
            display: flex;  /* 启用弹性布局 */
            flex-direction: column;  /* 垂直排列子元素 */
        }

        /* 页眉样式 */
        .header {
            background: var(--primary-color);  /* 使用主色调 */
            color: white;  /* 文字白色 */
            padding: 1.5rem;  /* 内边距 */
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);  /* 阴影效果 */
            position: relative;  /* 相对定位 */
            z-index: 100;  /* 层级设置 */
        }

        /* 导航容器样式 */
        .nav-container {
            background: rgba(255,255,255,0.95);  /* 半透明白色背景 */
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);  /* 导航阴影 */
            position: sticky;  /* 粘性定位 */
            top: 0;  /* 顶部固定 */
            z-index: 99;  /* 层级设置 */
        }

        /* 导航栏布局 */
        .nav {
            max-width: 1200px;  /* 最大宽度限制 */
            margin: 0 auto;  /* 水平居中 */
            padding: 1rem;  /* 内边距 */
            display: flex;  /* 弹性布局 */
            flex-wrap: wrap;  /* 允许换行 */
            gap: 1rem;  /* 元素间距 */
            justify-content: center;  /* 水平居中 */
        }

        /* 导航链接样式 */
        .nav-link {
            color: var(--primary-color);  /* 使用主色调 */
            text-decoration: none;  /* 去除下划线 */
            padding: 0.8rem 1.2rem;  /* 内边距 */
            border-radius: 8px;  /* 圆角 */
            transition: all 0.3s ease;  /* 过渡动画 */
            display: flex;  /* 弹性布局 */
            align-items: center;  /* 垂直居中 */
            gap: 0.5rem;  /* 图标与文字间距 */
        }

        /* 导航链接悬停效果 */
        .nav-link:hover {
            background: var(--secondary-color);  /* 辅助色背景 */
            color: white;  /* 文字白色 */
            transform: translateY(-2px);  /* 上移效果 */
        }

        /* 激活状态的导航链接 */
        .nav-link.active {
            background: var(--secondary-color);  /* 辅助色背景 */
            color: white;  /* 文字白色 */
        }

        /* 主要内容区域样式 */
        .main-content {
            flex: 1;  /* 占据剩余空间 */
            padding: 2rem;  /* 内边距 */
            max-width: 1200px;  /* 最大宽度限制 */
            margin: 0 auto;  /* 水平居中 */
            width: 100%;  /* 宽度100% */
        }

        /* 内容区块通用样式 */
        .section {
            background: white;  /* 白色背景 */
            border-radius: 12px;  /* 圆角 */
            padding: 2rem;  /* 内边距 */
            box-shadow: 0 4px 6px rgba(0,0,0,0.05);  /* 区块阴影 */
            margin-bottom: 2rem;  /* 下边距 */
            animation: fadeIn 0.5s ease;  /* 渐显动画 */
            display: none;  /* 默认隐藏 */
        }

        /* 激活状态的区块 */
        .section.active {
            display: block;  /* 显示区块 */
        }

        /* 区块标题样式 */
        .section-title {
            color: var(--primary-color);  /* 主色调文字 */
            margin-bottom: 1.5rem;  /* 下边距 */
            position: relative;  /* 相对定位 */
            padding-left: 1.5rem;  /* 左侧内边距 */
        }

        /* 标题左侧装饰线 */
        .section-title::before {
            content: "";  /* 伪元素内容 */
            position: absolute;  /* 绝对定位 */
            left: 0;  /* 左侧对齐 */
            top: 50%;  /* 垂直居中 */
            transform: translateY(-50%);  /* Y轴偏移 */
            width: 5px;  /* 宽度 */
            height: 70%;  /* 高度 */
            background: var(--secondary-color);  /* 辅助色 */
            border-radius: 3px;  /* 圆角 */
        }

        /* 卡片网格布局 */
        .card-grid {
            display: grid;  /* 网格布局 */
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));  /* 自适应列宽 */
            gap: 1.5rem;  /* 网格间距 */
        }

        /* 卡片通用样式 */
        .card {
            background: white;  /* 白色背景 */
            border-radius: 10px;  /* 圆角 */
            padding: 1.5rem;  /* 内边距 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);  /* 卡片阴影 */
            transition: transform 0.3s ease;  /* 过渡动画 */
            display: flex;  /* 弹性布局 */
            flex-direction: column;  /* 垂直排列 */
            align-items: center;  /* 水平居中 */
        }

        /* 卡片悬停效果 */
        .card:hover {
            transform: translateY(-5px);  /* 上移效果 */
        }

        /* 表单组样式 */
        .form-group {
            margin-bottom: 1.5rem;  /* 下边距 */
            max-width: 400px;  /* 最大宽度 */
        }

        /* 表单标签样式 */
        .form-label {
            display: block;  /* 块级显示 */
            margin-bottom: 0.5rem;  /* 下边距 */
            color: var(--primary-color);  /* 主色调文字 */
            font-weight: 500;  /* 中等字重 */
        }

        /* 输入框样式 */
        .form-input {
            width: 100%;  /* 宽度100% */
            padding: 0.8rem;  /* 内边距 */
            border: 2px solid #ddd;  /* 边框颜色 */
            border-radius: 8px;  /* 圆角 */
            transition: border-color 0.3s ease;  /* 过渡动画 */
        }

        /* 输入框聚焦样式 */
        .form-input:focus {
            border-color: var(--secondary-color);  /* 辅助色边框 */
            outline: none;  /* 去除默认轮廓 */
        }

        /* 按钮通用样式 */
        .btn {
            padding: 0.8rem 1.5rem;  /* 内边距 */
            border: none;  /* 无边框 */
            border-radius: 8px;  /* 圆角 */
            cursor: pointer;  /* 手型光标 */
            transition: all 0.3s ease;  /* 过渡动画 */
            display: inline-flex;  /* 行内弹性布局 */
            align-items: center;  /* 垂直居中 */
            gap: 0.5rem;  /* 元素间距 */
        }

        /* 主要按钮样式 */
        .btn-primary {
            background: var(--secondary-color);  /* 辅助色背景 */
            color: white;  /* 文字白色 */
        }

        /* 按钮悬停效果 */
        .btn-primary:hover {
            background: #2980b9;  /* 深蓝色背景 */
            transform: translateY(-2px);  /* 上移效果 */
        }

        /* 页脚样式 */
        .footer {
            background: var(--primary-color);  /* 主色调背景 */
            color: white;  /* 文字白色 */
            text-align: center;  /* 居中文本 */
            padding: 1.5rem;  /* 内边距 */
            margin-top: auto;  /* 自动顶部外边距 */
        }

        /* 认证容器样式 */
        .auth-container {
            max-width: 400px;  /* 最大宽度 */
            margin: 2rem auto;  /* 居中外边距 */
            padding: 2rem;  /* 内边距 */
            background: rgba(255,255,255,0.99);  /* 半透明白色背景 */
            border-radius: 12px;  /* 圆角 */
            box-shadow: 0 8px 30px rgba(0,0,0,0.12);  /* 阴影效果 */
        }

        /* 用户面板布局 */
        .user-panel {
            display: flex;  /* 弹性布局 */
            align-items: center;  /* 垂直居中 */
            gap: 0.8rem;  /* 元素间距 */
            background: rgba(255,255,255,0.9);  /* 半透明白色背景 */
            padding: 0.8rem 1.2rem;  /* 内边距 */
            border-radius: 8px;  /* 圆角 */
            box-shadow: 0 2px 4px rgba(0,0,0,0.05);  /* 阴影效果 */
        }

        /* 表单提示信息样式 */
        .form-alert {
            padding: 12px;  /* 内边距 */
            margin: 1rem 0;  /* 外边距 */
            border-radius: 8px;  /* 圆角 */
            display: none;  /* 默认隐藏 */
            animation: slideIn 0.3s ease;  /* 滑入动画 */
        }

        /* 成功提示样式 */
        .alert-success {
            background: #e8f5e9;  /* 浅绿色背景 */
            color: #2e7d32;  /* 深绿色文字 */
            border: 1px solid #a5d6a7;  /* 边框颜色 */
        }

        /* 错误提示样式 */
        .alert-error {
            background: #ffebee;  /* 浅红色背景 */
            color: #c62828;  /* 深红色文字 */
            border: 1px solid #ef9a9a;  /* 边框颜色 */
        }

        /* 滑入动画定义 */
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(-10px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* 移动端响应式设计 */
        @media (max-width: 768px) {
            .nav {
                flex-direction: column;  /* 垂直排列 */
                align-items: stretch;  /* 拉伸子元素 */
            }
            
            .nav-link {
                justify-content: center;  /* 水平居中 */
            }
            
            .main-content {
                padding: 1rem;  /* 减少内边距 */
            }
        }

        /* 进度条容器 */
        .progress-bar {
            background-color: #f3f3f3;  /* 浅灰色背景 */
            border-radius: 10px;  /* 圆角 */
            width: 100%;  /* 宽度100% */
            overflow: hidden;  /* 隐藏溢出 */
            margin-top: 1rem;  /* 顶部外边距 */
        }

        /* 进度条动态部分 */
        .progress {
            height: 10px;  /* 高度 */
            background-color: var(--secondary-color);  /* 辅助色填充 */
            width: 0;  /* 初始宽度 */
            transition: width 0.5s ease;  /* 宽度过渡动画 */
        }

        /* 开发者卡片样式 */
        .developer-card {
            display: flex;  /* 弹性布局 */
            flex-direction: column;  /* 垂直排列 */
            align-items: center;  /* 水平居中 */
            margin-bottom: 2rem;  /* 下边距 */
            padding: 2rem;  /* 内边距 */
            border: 2px solid #ddd;  /* 边框颜色 */
            border-radius: 12px;  /* 圆角 */
            background: #fff;  /* 白色背景 */
            box-shadow: 0 4px 8px rgba(0,0,0,0.05);  /* 阴影效果 */
            transition: box-shadow 0.3s ease;  /* 阴影过渡动画 */
        }

        /* 卡片悬停效果 */
        .developer-card:hover {
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);  /* 加强阴影 */
        }

        /* 开发者头像样式 */
        .developer-avatar {
            width: 150px;  /* 固定宽度 */
            height: 150px;  /* 固定高度 */
            border-radius: 50%;  /* 圆形裁剪 */
            object-fit: cover;  /* 图片填充方式 */
            margin-bottom: 1rem;  /* 下边距 */
        }

        /* 开发者姓名样式 */
        .developer-name {
            font-size: 1.5rem;  /* 字体大小 */
            margin-bottom: 0.5rem;  /* 下边距 */
            color: var(--primary-color);  /* 主色调文字 */
        }

        /* 开发者职位样式 */
        .developer-title {
            font-size: 1rem;  /* 字体大小 */
            margin-bottom: 1rem;  /* 下边距 */
            color: var(--text-color);  /* 继承文本颜色 */
        }

        /* 开发者简介样式 */
        .developer-bio {
            font-size: 1rem;  /* 字体大小 */
            color: var(--text-color);  /* 继承文本颜色 */
            line-height: 1.6;  /* 行高 */
            text-align: center;  /* 居中文本 */
        }
    </style>
</head>
<body>
    <!-- 页面头部 -->
    <header class="header">
        <h1>龙华系统研发中心</h1>  <!-- 主标题 -->
        <p>LoongChineOperatingSystem</p>  <!-- 副标题 -->
    </header>

    <!-- 导航区域 -->
    <nav class="nav-container">
        <div class="nav">
            <!-- 软件下载导航 -->
            <a href="#" class="nav-link active" onclick="showSection('download')">
                <i class="fas fa-download"></i>软件下载  <!-- 下载图标 -->
            </a>
            <!-- 开发者新闻导航 -->
            <a href="#" class="nav-link" onclick="showSection('news')">
                <i class="fas fa-newspaper"></i>开发者新闻
            </a>
            <!-- 技术论坛导航 -->
            <a href="#" class="nav-link" onclick="showSection('forum')">
                <i class="fas fa-comments"></i>技术论坛
            </a>
            <!-- 项目管理导航 -->
            <a href="#" class="nav-link" onclick="showSection('projects')">
                <i class="fas fa-project-diagram"></i>项目管理
            </a>
            <!-- 开发者介绍导航 -->
            <a href="#" class="nav-link" onclick="showSection('developers')">
                <i class="fas fa-users"></i>开发者介绍
            </a>
            <!-- 用户面板（默认隐藏） -->
            <div id="userPanel" class="user-panel" style="display: none;">
                <i class="fas fa-user-circle fa-lg"></i>  <!-- 用户图标 -->
                <span id="usernameDisplay"></span>  <!-- 用户名显示区域 -->
                <button onclick="logout()" class="btn btn-primary btn-sm">
                    <i class="fas fa-sign-out-alt"></i>退出  <!-- 退出按钮 -->
                </button>
            </div>
            <!-- 用户登录导航 -->
            <a href="#" class="nav-link" onclick="showSection('login')" id="loginLink">
                <i class="fas fa-sign-in-alt"></i>用户登录
            </a>
        </div>
    </nav>

    <!-- 页面主要内容 -->
    <main class="main-content">
        <!-- 软件下载模块（默认激活） -->
        <section id="download" class="section active">
            <h2 class="section-title">软件下载</h2>
            <div class="card-grid">
                <div class="card">
                    <h3>桌面版系统</h3>
                    <p>最新版本：v2.3.1</p>
                    <button class="btn btn-primary" onclick="downloadSoftware('desktop')">
                        <i class="fas fa-download"></i>下载安装包
                    </button>
                </div>
                <div class="card">
                    <h3>移动端系统</h3>
                    <p>最新版本：v1.8.2</p>
                    <button class="btn btn-primary" onclick="downloadSoftware('mobile')">
                        <i class="fas fa-download"></i>下载安装包
                    </button>
                </div>
            </div>
        </section>

        <!-- 新闻模块 -->
        <section id="news" class="section">
            <h2 class="section-title">最新动态</h2>
            <div class="card-grid">
                <div class="card">
                    <h3>新版本发布</h3>
                    <p>2023年12月 v3.0 预览版发布</p>
                    <p>新增容器化支持，优化内核调度算法</p>
                </div>
                <div class="card">
                    <h3>开发者大会</h3>
                    <p>2024年开发者大会报名开启</p>
                    <p>时间：2024年3月15日-17日</p>
                </div>
            </div>
        </section>

        <!-- 论坛模块 -->
        <section id="forum" class="section">
            <h2 class="section-title">技术论坛</h2>
            <div class="card-grid">
                <div class="card">
                    <h3>系统内核讨论区</h3>
                    <p>最新帖子：内存管理优化方案</p>
                    <button class="btn btn-primary">进入论坛</button>
                </div>
                <div class="card">
                    <h3>应用开发专区</h3>
                    <p>最新帖子：跨平台开发实践</p>
                    <button class="btn btn-primary">进入讨论</button>
                </div>
            </div>
        </section>

        <!-- 项目进度模块 -->
        <section id="projects" class="section">
            <h2 class="section-title">项目管理</h2>
            <div class="card-grid">
                <div class="card">
                    <h3>LCOS 3.0开发</h3>
                    <p>进度：75%</p>
                    <div class="progress-bar">
                        <div class="progress" style="width: 75%"></div>  <!-- 进度条动态部分 -->
                    </div>
                </div>
                <div class="card">
                    <h3>移动端优化</h3>
                    <p>进度：60%</p>
                    <div class="progress-bar">
                        <div class="progress" style="width: 60%"></div>
                    </div>
                </div>
            </div>
        </section>

        <!-- 登录模块 -->
        <section id="login" class="section">
            <div class="auth-container">
                <h2 class="section-title">系统登录</h2>
                <div id="loginAlert" class="form-alert"></div>  <!-- 登录提示容器 -->
                <form id="loginForm">  <!-- 登录表单 -->
                    <div class="form-group">
                        <label for="loginUsername" class="form-label">用户名</label>
                        <input type="text" id="loginUsername" class="form-input" 
                               placeholder="用户名" required>  <!-- 必填字段 -->
                    </div>
                    <div class="form-group">
                        <label for="loginPassword" class="form-label">密码</label>
                        <input type="password" id="loginPassword" class="form-input" 
                               placeholder="密码" required>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">  <!-- 块级按钮 -->
                        <i class="fas fa-sign-in-alt"></i> 立即登录
                    </button>
                    <div class="auth-switch">
                        首次使用？<a onclick="showSection('register')">立即注册</a>  <!-- 注册跳转 -->
                    </div>
                </form>
            </div>
        </section>

        <!-- 注册模块 -->
        <section id="register" class="section">
            <div class="auth-container">
                <h2 class="section-title">新用户注册</h2>
                <div id="registerAlert" class="form-alert"></div>
                <form id="registerForm">
                    <div class="form-group">
                        <label for="regUsername" class="form-label">用户名</label>
                        <input type="text" id="regUsername" class="form-input" 
                               placeholder="用户名 (4-16位字母数字)" required
                               pattern="[A-Za-z0-9]{4,16}">  <!-- 正则验证 -->
                    </div>
                    <div class="form-group">
                        <label for="regPassword" class="form-label">密码</label>
                        <input type="password" id="regPassword" class="form-input" 
                               placeholder="密码 (8-18位，含大小写)" 
                               pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,18}$" required>  <!-- 密码复杂度验证 -->
                    </div>
                    <button type="submit" class="btn btn-primary btn-block">
                        <i class="fas fa-user-plus"></i> 立即注册
                    </button>
                    <div class="auth-switch">
                        已有账户？<a onclick="showSection('login')">立即登录</a>
                    </div>
                </form>
            </div>
        </section>

        <!-- 开发者介绍模块 -->
        <section id="developers" class="section">
            <h2 class="section-title">我们的开发者</h2>
            <div class="card-grid">
                <!-- 开发者卡片1 -->
                <div class="developer-card">
                    <img src="fenghaozhe.jpg" alt="冯浩哲的头像" class="developer-avatar">
                    <div class="developer-name">冯浩哲</div>
                    <div class="developer-title">系统架构师</div>
                    <div class="developer-bio">
                        冯浩哲拥有超过5年的系统开发经验，专注于系统架构设计与优化。他主导了LCOS系统的早期开发，并在系统内核方面做出了重要贡献。
                    </div>
                </div>
                <!-- 开发者卡片2 -->
                <div class="developer-card">
                    <img src="zhongkeyi.jpg" alt="钟可怡的头像" class="developer-avatar">
                    <div class="developer-name">钟可怡</div>
                    <div class="developer-title">移动应用开发专家</div>
                    <div class="developer-bio">
                        钟可怡专注于移动应用开发，特别擅长于跨平台应用的设计与实现。她是LCOS移动端开发的主要负责人，并成功地将系统移植到多种移动设备上。
                    </div>
                </div>
                <!-- 开发者卡片3 -->
                <div class="developer-card">
                    <img src="huangjianxun.jpg" alt="黄建勋的头像" class="developer-avatar"> 
                    <div class="developer-name">黄建勋</div>
                    <div class="developer-title">软件工程师</div>
                    <div class="developer-bio">
                        黄建勋专注于移动应用开发，特别擅长于跨平台应用的设计与实现。他是LCOS移动端开发的主要负责人，并成功地将系统移植到多种移动设备上。
                    </div>
                </div>
            </div>
        </section>
    </main>

    <!-- 页面页脚 -->
    <footer class="footer">
        <p>&copy; 2025 龙华系统研发中心 - 版权所有</p>  <!-- 版权声明 -->
        <p>联系我们: support@loongchine.com</p>  <!-- 联系方式 -->
    </footer>

    <script>
        // 切换内容区域函数
        function showSection(sectionId) {
            // 移除所有导航激活状态
            document.querySelectorAll('.nav-link').forEach(link => {
                link.classList.remove('active');
                // 通过检查onclick事件判断当前导航项
                if(link.onclick && link.onclick.toString().includes(sectionId)) {
                    link.classList.add('active');
                }
            });
            
            // 隐藏所有内容区域
            document.querySelectorAll('.section').forEach(section => {
                section.classList.remove('active');
            });
            // 显示目标区域
            document.getElementById(sectionId).classList.add('active');
        }

        // 后端API基础地址
        const API_BASE = 'http://localhost:8080';

        // 显示表单提示信息
        function showAlert(containerId, type, message) {
            const alertDiv = document.getElementById(containerId);
            alertDiv.className = `form-alert alert-${type}`;  // 动态设置样式类
            alertDiv.textContent = message;
            alertDiv.style.display = 'block';
            setTimeout(() => alertDiv.style.display = 'none', 3000);  // 3秒后自动隐藏
        }

        // 注册表单提交处理
        document.getElementById('registerForm').addEventListener('submit', async (e) => {
            e.preventDefault();  // 阻止默认提交
            const data = {
                username: document.getElementById('regUsername').value.trim(),
                password: document.getElementById('regPassword').value.trim()
            };

            try {
                const response = await fetch(`${API_BASE}/register`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    body: new URLSearchParams(data)  // 表单数据编码
                });

                const result = await response.json();
                if (result.success) {
                    showAlert('registerAlert', 'success', '注册成功！正在跳转...');
                    setTimeout(() => showSection('login'), 1500);  // 1.5秒后跳转登录
                } else {
                    showAlert('registerAlert', 'error', result.message || '注册失败');
                }
            } catch (error) {
                showAlert('registerAlert', 'error', '服务连接失败');
            }
        });

        // 登录表单提交处理
        document.getElementById('loginForm').addEventListener('submit', async (e) => {
            e.preventDefault();
            const data = {
                username: document.getElementById('loginUsername').value.trim(),
                password: document.getElementById('loginPassword').value.trim()
            };

            try {
                const response = await fetch(`${API_BASE}/login`, {
                    method: 'POST',
                    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                    body: new URLSearchParams(data),
                    credentials: 'include'  // 包含cookie
                });

                const result = await response.json();
                if (result.success) {
                    updateUserPanel(data.username);  // 更新用户面板
                    showAlert('loginAlert', 'success', '登录成功！');
                    setTimeout(() => showSection('download'), 1000);  // 1秒后跳转下载页
                } else {
                    showAlert('loginAlert', 'error', result.message || '登录失败');
                }
            } catch (error) {
                showAlert('loginAlert', 'error', '服务连接失败');
            }
        });

        // 更新用户面板显示状态
        function updateUserPanel(username) {
            const panel = document.getElementById('userPanel');
            const loginLink = document.getElementById('loginLink');
            if (username) {
                panel.style.display = 'flex';  // 显示用户面板
                loginLink.style.display = 'none';  // 隐藏登录链接
                document.getElementById('usernameDisplay').textContent = username;
            } else {
                panel.style.display = 'none';  // 隐藏用户面板
                loginLink.style.display = 'flex';  // 显示登录链接
            }
        }

        // 退出登录功能
        async function logout() {
            try {
                await fetch(`${API_BASE}/logout`, {
                    method: 'POST', 
                    credentials: 'include'  // 携带cookie
                });
                updateUserPanel(null);  // 清空用户面板
                showSection('login');  // 跳转登录页
            } catch (error) {
                console.error('退出失败:', error);
            }
        }

        // 检查登录状态
        async function checkLoginStatus() {
            try {
                const response = await fetch(`${API_BASE}/checkLogin`, {
                    credentials: 'include'  // 携带cookie
                });
                const result = await response.json();
                if (result.loggedIn) updateUserPanel(result.username);
            } catch (error) {
                console.log('会话检查失败');
            }
        }

        // 页面加载时检查登录状态
        checkLoginStatus();

        // 模拟下载功能
        function downloadSoftware(type) {
            const versions = {
                desktop: 'LoongChine-Desktop-2.3.1.iso',
                mobile: 'LoongChine-Mobile-1.8.2.apk'
            };
            alert(`开始下载: ${versions[type]}`);  // 模拟下载提示
        }

        // 动态添加进度条（示例代码）
        document.querySelector('#projects .card-grid .card:nth-child(2)').innerHTML += `
            <div class="progress-bar">
                <div class="progress" style="width: 60%"></div>
            </div>
        `;
    </script>
</body>
</html>